<template>
    <div class="bg">
        <!-- 搜索结构 -->
        <form action="/">
            <van-search v-model="value" show-action :placeholder="keyword" @search="onSearch" @cancel="onCancel" />
        </form>
        <!-- 搜索列表 -->
        <div v-if="value.length" class="searchList">
            <ul>

                <li @click="toGoodsList" v-for="item, index in searchList" :key="index">
                    <span>{{ item }}</span>
                    <span>></span>
                </li>

            </ul>
        </div>
        <!-- 历史记录 -->
        <div v-if="searchHistoryList?.length && !value" class="historicaRecord">
            <div class="title">
                <div class="text">历史记录</div>
                <div class="delete" @click="deleteRecord"><van-icon name="delete-o" size="20px" />
                </div>
            </div>
            <div class="recordList">
                <span @click="goGoodsList" v-for="item, index in searchHistoryList" :key="index">{{ item }}</span>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div v-if="!value" class="historicaRecord" style="margin-top: 12px;">
            <div class="title">
                <div class="text">热门搜索</div>

            </div>
            <div class="recordList">
                <span @click="goGoodsList" :class="index === 0 ? 'active' : ''" v-for="item, index in hotKeywordVOList"
                    :key="index">{{
                        item.keyword
                    }}</span>

            </div>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';

export default defineComponent({
    name: '',
})
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { debounce } from 'lodash';
import { ReqSearchHot, ReqSearchInput } from '@/api/search'
const router = useRouter()
const value = ref('');
const keyword = ref('')
const hotKeywordVOList = ref<any>([])
const searchList = ref<any>([])
const searchHistoryList = ref<any>([])


//取消返回首页
const onCancel = () => {

    router.go(-1)
}
//监听搜索框数据
watch(value, debounce(async (val) => {
    let { data } = await ReqSearchInput(val)
    searchList.value = data
}, 300))


//进入页面加载数据
onMounted(() => {
    getSearchInfo()
    //展示搜索历史

    searchHistoryList.value = JSON.parse(localStorage.getItem('seachRecord') as any)



})

const getSearchInfo = async () => {
    let { data } = await ReqSearchHot()
    // console.log(data);
    keyword.value = data.defaultKeyword.keyword
    hotKeywordVOList.value = data.hotKeywordVOList
}
//确定搜索

const onSearch = (val: any) => {
    // console.log(searchHistoryList.value);
    searchHistoryList.value = searchHistoryList.value ? searchHistoryList.value : []
    if (searchHistoryList.value.length < 10) {
        searchHistoryList.value.unshift(val)
    }
    //数组去重
    searchHistoryList.value = Array.from(new Set(searchHistoryList.value));
    localStorage.setItem('seachRecord', JSON.stringify(searchHistoryList.value))
    // console.log(newSeachRecordList);
    router.push({ path: '/goods', query: { keyword: val } })
}

//封装存搜索历史记录的函数
const saveSearchHistoryList = (key: any) => {
    searchHistoryList.value = searchHistoryList.value ? searchHistoryList.value : []
    if (searchHistoryList.value.length < 10) {
        searchHistoryList.value.unshift(key)
    }
    //数组去重
    searchHistoryList.value = Array.from(new Set(searchHistoryList.value));
    localStorage.setItem('seachRecord', JSON.stringify(searchHistoryList.value))

}
//点击搜索词跳转到商品列表页  且把搜索词存入本地储存

const toGoodsList = (e: any) => {
    let word = e.target.childNodes[0].nodeValue || e.target.childNodes[0].innerText
    saveSearchHistoryList(word)

    router.push({ path: '/goods', query: { keyword: word } })
    // props.changeText(word)
}
//点击历史记录和热门搜索
const goGoodsList = (e: any) => {
    // console.log(searchHistoryList.value);
    value.value = e.target.innerText
    //调用函数存搜索历史记录
    saveSearchHistoryList(e.target.innerText)

    router.push({ path: '/goods', query: { keyword: e.target.innerText } })

}

//删除历史记录
const deleteRecord = () => {
    localStorage.clear()
    searchHistoryList.value = JSON.parse(localStorage.getItem('seachRecord') as any)

}



</script>

<style scoped lang="scss">
.active {
    border-color: rgb(255, 85, 0) !important;
    color: rgb(255, 85, 0);
}

.bg {
    width: 100%;
    height: 100%;
    background-color: rgb(240, 240, 240);

    .historicaRecord {
        background-color: white;
        margin-top: 1px;
        padding: 12px;

        .title {
            display: flex;
            justify-content: space-between;
            color: rgb(161, 163, 164);
        }

        .recordList {
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: small;

            span {
                display: inline-block;
                border: 1px solid rgb(145, 143, 143);
                padding: 6px;
                border-radius: 4px;
                margin: 10px;
            }
        }
    }

    .searchList {
        background-color: white;
        margin-top: 1px;
        padding: 12px;

        ul li {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgb(211, 211, 211);
            padding: 10px;

            span {
                display: inline-block;
                color: rgb(102, 102, 102);
                font-size: 14px;
            }
        }
    }

}
</style>